
<template>
  <div id="register">

    <!--头部-->
    <div class="head">  
      <div class="wrapper">
        <img src="../../assets/images/suggest/QQ浏览器截图_20180204184050_9C04962A84404a8e8132BD45A7E80CD4.jpg" height="84"
             width="207"/>
        <h3 style="display: inline-block">用户登录</h3>
      </div>
    </div>

    <!--内容-->
    <div class="content">
      <div class="wrapper">

        <!--左边图片-->
        <div class="picture">
          <img src="../../assets/images/suggest/QQ浏览器截图_20180204185858_2478A59BEB6D4455A9BE401E1A71F0B3.jpg"
               height="335" width="570"/></div>

        <!--右侧表单-->
        <div class="registerForm">
          <div class="login">
            <ul class="nav nav-tabs" role="tablist" style="display: flex">
              <li role="presentation">
                <a href="#login" aria-controls="home" role="tab" data-toggle="tab" style="font-size: 18px;color: #555;">账号登录</a>
              </li>
              <li role="presentation">
                <a href="#fastLogin" aria-controls="home" role="tab" data-toggle="tab"
                   style="font-size: 18px;color: #555">验证码快捷登录</a>
              </li>
            </ul>

            <!--tab标签-->
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="login">

                <div class="input-group">
                  <span class="input-group-addon" style="background: #fff"><i
                    class="glyphicon glyphicon-user"></i></span>
                  <input type="text" class="form-control" placeholder="手机号码" v-model="phone" @blur="jiancha"  ref='telephone'>
                </div>

                <div class="input-group">
                  <span class="input-group-addon" style="background: #fff"><i
                    class="glyphicon glyphicon-lock"></i></span>
                  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="验证码"
                         v-model="verification">
                  <a class="input-group-addon" style="color: #4493eb;background: #fff">获取验证码</a>
                </div>
              <a href="index.html"><button class="btn btn-danger" style="margin-top: -5px">登录</button></a>  
                <div class="bottomInfo" style="margin-top: -20px;display: flex;justify-content: space-between">
                  <a href="" style="font-size: 14px;color: #4493eb">注册新账号</a>
                  <span style="font-size: 12px;color: #999">找回密码可在手机端操作</span>
                </div>
              </div>

              <div role="tabpanel" class="tab-pane" id="fastLogin">
                
                <!--输入框组1-->
                <div class="input-group">
                  <span class="input-group-addon" style="background: #fff"><i
                    class="glyphicon glyphicon-user"></i></span>
                  <input type="text" class="form-control" placeholder="用户名/手机">
                </div>

                <!--输入框组2-->
                <div class="input-group">
                  <span class="input-group-addon" style="background: #fff"><i
                    class="glyphicon glyphicon-lock"></i></span>
                  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="输入密码"
                         v-model="verification">
                  <a class="input-group-addon" style="color: #4493eb;background: #fff">获取验证码</a>
                </div>

                <!--登录按钮-->
               <a href="index.html"><button class="btn btn-danger" style="margin-top: -5px" @click.enter="check">登录</button></a>

                <div class="bottomInfo" style="margin-top: -20px;display: flex;justify-content: space-between">
                  <a href="" style="font-size: 14px;color: #4493eb">注册新账号</a>
                  <span style="font-size: 12px;color: #999">找回密码可在手机端操作</span>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

  export default {
    name: "register",
    data() {
      return {
        phone: "",
        verification: "",
      };
    },
    methods: {
      jiancha() {
        if (this.phone == "") {
          alert("手机号不能为空");
        }else if (!(/^1[3|4|5|8][0-9]\d{4,8}$/).test(this.phone)) {
          alert("手机号码位数，格式不正确");
        }else{

        }
          
      }
      /*jiancha2(){
        if(this.verification == ""){
          alert("验证码不能为空");
        }else if(!(/[0-9][0-9][0-9][0-9][0-9][0-9]/).test(this.verification)){
          alert("验证码不正确");
        }else{

        }*/
      
    }

  }
</script>

<style>
  /*包裹大小*/
  #register .wrapper {
    width: 1080px;
    height: 90px;
    background: #fff;
    margin: 0 auto;
  }


  #register .content .wrapper {
    height: 560px;
    background: #f6f6f6;
    display: flex;
    justify-content: space-around;
  }

  /*图片*/
  #register .content .picture {
    margin: 80px 0 0 30px;
  }

  /*表单*/
  #register .content .registerForm {
    margin: 80px 0 0 30px;
  }

  /*列表*/
  #register .content ul li {
    flex: 1;
  }

  /*登录按钮*/
  #register .content .registerForm .login {
    width: 356px;
    height: 401px;
    background: #fff;
  }

  /*获得焦点*/
  #register .content .registerForm .login a:focus {
    background: #e6e6e6;
  }

  /*链接*/
  #register .content .registerForm .login a {
    cursor: pointer;
  }

  /*大小*/
  #register .content .tab-content .input-group,
  #register .content .tab-content button,
  #register .content .tab-content .bottomInfo {
    width: 263px;
    height: 35px;
    margin: 35px;
  }

  /*输入框组*/
  #register .content .tab-content .input-group {
    border: 1px solid #e5e5e5;
  }


  #register .bottom {
    height: 334px;
    width: 100%;
  }

  /*链接样式*/
  .nav-tabs > li > a {
    /* margin-right: 2px; */
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
  }

  #register .bottom .wrapper {
    height: 100%;
    margin: 0 auto;
  }

</style>
